<script setup>
import { ElMessageBox } from "element-plus"
import {onMounted, reactive, ref} from "vue"
import {Plus, Refresh, Search} from "@element-plus/icons-vue"
import {add, edit, pageList, deleteById} from "@/api/system/post.js";

defineOptions({
  name: '/system/post'
})

//搜索类
const search = ref({
  name: "",
  code: "",
  status: "",
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

//搜索表单实例
const searchFormRef = ref(null)
const form = ref(null)

const rules = reactive({
  name: [
    {required: true, message: '岗位名称不能为空', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '岗位编码不能为空', trigger: 'blur'},
  ]
})

//状态枚举
const statusEnums = ref([
  {label: "开启", value: 1},
  {label: "禁用", value: 2},
])

//分页配置
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

//岗位类
const post = ref({
  id: "",
  name: "",
  code: "",
  introduction: '',
  sort: "",
  status: "",
  createTime: "",
})

const requestPageList = () => {
  pageList(search.value).then(resp => {
    postData.value = resp.data.data
    search.value.total = Number(resp.data.total)
  })
}

//初始化
onMounted(() => {
  requestPageList()
})

//岗位职称数据
const postData = ref([])

//Dialog配置类
const dialogConfig = ref( {
  visible: false,
  title: "添加"
})

//监听重置事件
const onReset = () => {
  pagination.value.pageNum = 1
  searchFormRef.value.resetFields()
  requestPageList()
}

//监听搜索事件
const onSearch = () => {
  requestPageList()
}

//监听编辑事件
const onEdit = (rowData) => {
  post.value = {...rowData}
  dialogConfig.value.visible = true
}

//监听删除事件
const onDelete = (rowData) => {
  ElMessageBox.confirm('您确认删除这条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteById(rowData.id).then(() => {
      requestPageList()
    })
  })
}

//监听dialog关闭回调事件
const handleDialogClosed = () => {
  post.value = {
    id: "",
    name: "",
    introduction: "",
    code: "",
    sort: "",
    status: "",
    createTime: "",
  }
}

//监听新增事件
const onAdd = () => {
  dialogConfig.value.visible = true
}

const onDialogConfirm = async () => {
  if(!form.value) return
  const valid = await form.value.validate()
  if (valid) {
    if (post.value.id > 0) {
      await edit(post.value)
    } else {
      await add(post.value)
    }
    requestPageList()
    dialogConfig.value.visible = false
  }
}

//分页事件
const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
  requestPageList()
}
</script>

<template>
  <div class="cb-main-container">
    <div class="cb-common-box search-box">
      <el-form inline :model="search" ref="searchFormRef">
        <el-form-item prop="name" label="名称">
          <el-input v-model="search.name" placeholder="请输入岗位名称"/>
        </el-form-item>
        <el-form-item prop="code" label="编号">
          <el-input v-model="search.code" placeholder="请输入岗位编号" />
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-select v-model="search.status" placeholder="请选择状态" style="width: 200px">
            <el-option v-for="(item, index) in statusEnums" :key="index" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="Refresh" @click="onReset">重置</el-button>
          <el-button icon="Search" @click="onSearch" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="cb-common-box main-box">
      <div>
        <el-button icon="Plus" type="primary" @click="onAdd">新增</el-button>
      </div>
      <el-table class="cb-table-box" :data="postData" empty-text="暂无数据" size="large">
        <el-table-column type="index" width="50" />
        <el-table-column property="name" label="名称" />
        <el-table-column property="code" label="编码" />
        <el-table-column property="introduction" label="岗位职责" show-overflow-tooltip />
        <el-table-column property="status" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
              {{ scope.row.status === 1 ? "开启" : "禁用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column property="sort" label="排序" />
        <el-table-column label="操作" align="right">
          <template #default="scope">
            <el-button link type="primary" @click="onEdit(scope.row)" icon="Edit">编辑</el-button>
            <el-button link type="danger" @click="onDelete(scope.row)" icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="search.total" :current-page="search.pageNum" style="margin-top: 16px" @current-change="handleCurrentChange" />
    </div>

    <!-- 表单组件S -->
    <el-dialog v-model="dialogConfig.visible" :title="dialogConfig.title" width="500" :close-on-click-modal="dialogConfig.closeOnClickModal" @closed="handleDialogClosed">
      <el-form :model="post" label-width="68px" :rules="rules" ref="form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="post.name" autocomplete="off" placeholder="请输入岗位名称" />
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="post.code" autocomplete="off" placeholder="请输入岗位编码" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="post.status" placeholder="请选择岗位状态">
                <el-option v-for="(item, index) in statusEnums" :label="item.label" :value="item.value" :key="index" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input v-model="post.sort" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="岗位职责" prop="sort">
          <el-input type="textarea" v-model="post.introduction" :rows="6" autocomplete="off" show-word-limit maxlength="500" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogConfig.visible = false">取消</el-button>
          <el-button type="primary" @click="onDialogConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 表单组件E -->
  </div>
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
